<!-- 
    单折线图界面
-->
<template lang="">
    <div class="container" ref="node">
        <!-- empty node, used to render graph -->
    </div>
</template>
<script>


export default {
    props:['x_axis_data', 'y_axis_data'],
    data(){
        return {
            echarts_instance: null,
            options: null, 
            node: null,
        }
    },
    methods:{
        draw(){
            console.log("x-data: ", this.x_axis_data, ", y-data: ", this.y_axis_data)
            if(this.node == null){
                this.node = this.$refs.node;
            }
            console.log("graph node: ", this.node);
            if(this.echarts_instance == null){
                this.echarts_instance = this.$echarts.init(this.node);
            }
            if(this.options == null){
                this.options = {
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.x_axis_data,
                        show: false
                    },
                    yAxis: {
                        type: 'value',
                        show: false
                    },
                    series: [
                        {
                        data: this.y_axis_data,
                        type: 'line',
                        areaStyle: {}
                        }
                    ]
                }
            }else{
                // 只更新数据
                this.options.xAxis.data = [this.x_axis_data]
                this.options.series.data = [this.y_axis_data]
            }
            this.echarts_instance.setOption(this.options)
        }
    },
    mounted(){
        // 组件创建完成时绘制图表
        this.draw()
    }
}
</script>
<style lang="less" scoped>
.container{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
</style>